<template>
	<div class="el-descriptions">
		<el-descriptions title="用户信息" :column="2" border :colon="true">
			<template slot="extra" v-if="imgUrl">
				<el-button type="primary" size="small" icon="el-icon-download" @click="downloadPicture(qrCodeUrl, doctor.doctorName)">下载二维码</el-button>
			</template>
			<el-descriptions-item labelClassName="item-label">
				<template slot="label">
					<i class="el-icon-user"></i>
					医生姓名
				</template>
				{{ doctor.doctorName }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" v-if="doctor.sysUser">
				<template slot="label">
					<i class="el-icon-mobile-phone"></i>
					手机号
				</template>
				{{ doctor.sysUser.phonenumber }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" v-if="doctor.hospital">
				<template slot="label">
					<i class="el-icon-office-building"></i>
					医院
				</template>
				{{ doctor.hospital.hospitalName }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" v-if="doctor.dept">
				<template slot="label">
					<i class="el-icon-location-outline"></i>
					科室
				</template>
				{{ doctor.dept.deptName }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" v-if="doctor.sysUser">
				<template slot="label">
					<i class="el-icon-male"></i>
					性别
				</template>
				<el-tag v-if="doctor.sysUser.sex == 0"><i class="el-icon-male"></i> {{ labelFilter(doctor.sysUser.sex, sexOptions) }}</el-tag>
				<el-tag type="danger" v-if="doctor.sysUser.sex == 1"><i class="el-icon-female"></i> {{ labelFilter(doctor.sysUser.sex, sexOptions) }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label">
				<template slot="label">
					<i class="el-icon-collection-tag"></i>
					职称
				</template>
				{{ labelFilter(doctor.title, titleOptions) }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" v-if="doctor.sysUser">
				<template slot="label">
					<i class="el-icon-bank-card"></i>
					积分
				</template>
				{{ doctor.point }}
				<el-button type="text" size="mini" icon="el-icon-edit" @click="handlePointUpperLimit(doctor.doctorId, 0)">设置</el-button>
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label">
				<template slot="label">
					<i class="el-icon-coin"></i>
					可提取积分
				</template>
				{{ doctor.pointUpperLimit }}
				<el-button type="text" size="mini" icon="el-icon-edit" @click="handlePointUpperLimit(doctor.doctorId, 1)">设置</el-button>
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" label="擅长领域" :span="24">
				{{ doctor.goodSkill }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" label="个人简介" :span="24">
				{{ doctor.briefIntroduction }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" label="职业经历" :span="24">
				{{ doctor.briefExperience }}
			</el-descriptions-item>
			<el-descriptions-item labelClassName="item-label" label="医生二维码" :span="24">
				<vue-qr v-show="false" :text="imgUrl" :size="300" :callback="qrCallback"></vue-qr>
				<el-image v-if="qrCodeUrl" style="height: 100px;width: 100px;" ref="preview" :src="qrCodeUrl" :preview-src-list="[qrCodeUrl]"></el-image>
			</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script>
import VueQr from 'vue-qr'
import { updateDoctorPoint } from '@/api/doctor'

export default {
	props: {
		doctor: {}
	},
	components: {
		VueQr
	},
	data() {
		return {
			sexOptions: [],
			titleOptions: [],
			imgUrl: '',
			qrCodeUrl: undefined,
			srcList: []
		};
	},
	created() {
		this.getDicts("sys_user_sex").then((response) => {
			this.sexOptions = response.data;
		});
		this.getDicts("doctor_title").then((response) => {
			this.titleOptions = response.data;
		});
	},
	mounted() {

	},
	computed: {
		labelFilter() {
			return ((text, option) => {
				for (let i = 0; i < option.length; i++) {
					if (option[i].dictValue == text) {
						return option[i].dictLabel;
					}
				}
			})
		}
	},
	methods: {
		handlePointUpperLimit(doctorId, type) {
			this.$prompt('请输入要修改的积分', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^[0-9]*$/,
				inputErrorMessage: '积分请输入整数'
			}).then(({ value }) => {
				const params = { doctorId };
				if (type === 0) {
					params.point = value;
				} else if (type === 1) {
					params.pointUpperLimit = value;
				}
				updateDoctorPoint(params).then(res => {
					if (res.code === 200) {
						this.$message({
							type: 'success',
							message: '操作成功'
						});
						this.$emit('getDoctor');
					}
				})
			});
		},
		qrCallback(qrCodeUrl) {
			this.qrCodeUrl = qrCodeUrl;
		},
		downloadPicture(imgSrc, name) {
			const image = new Image();
			// 解决跨域 Canvas 污染问题
			image.setAttribute("crossOrigin", "anonymous");
			image.src = imgSrc;
			image.onload = () => {
				const canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				const context = canvas.getContext("2d");
				context.drawImage(image, 0, 0, image.width, image.height);
				canvas.toBlob((blob) => {
					const url = URL.createObjectURL(blob);
					const a = document.createElement("a");
					a.download = name || "photo";
					a.href = url;
					a.click();
					a.remove();
					URL.revokeObjectURL(url);
				});
			};
		}
	},
	watch: {
		doctor: function(val) {
			this.imgUrl = `https://console.jsycgm.com?bindId=${this.doctor.doctorId}`;
		}
	}
}
</script>

<style lang="scss" scoped>
	::v-deep .el-descriptions {
		width: 80%;
	}

	::v-deep .item-label {
		width: 120px;
	}


</style>
